<template>
  <view class="page">
    <!-- 循环球局列表 -->
    <view v-for="(item, index) in listData" :key="index" class="card-box">
      <!-- 卡片主体 -->
      <view class="card-content">
        <!-- 左侧主要内容 -->
        <view class="left-info">
          <!-- 标题：例如 BoBo的球局 -->
          <text class="game-title">{{ item.title }}</text>
          <!-- 地点名称 -->
          <text class="game-location">{{ item.location }}</text>

          <!-- 时间 + 围观人数 -->
          <view class="time-watchers">
            <u-icon name="calendar" size="16" color="#999" style="margin-right: 3rpx;" />
            <text class="time-text">{{ item.time }}</text>

            <u-icon name="group" size="16" color="#74c050" style="margin: 0 3rpx 0 15rpx;" />
            <text class="watch-text">{{ item.watchers }}人围观</text>
          </view>

          <!-- 头像列表 + 选手标签（如果需要） -->
          <view class="participants">
            <view class="u-avatar-item">
              <u-avatar v-for="(mem, mIndex) in item.members" :key="mIndex" :src="mem.avatar" shape="square"
                style="margin-right: -10rpx;" />
            </view>

            <u-tag color="#74c050" textColor="#fff" shape="circle" size="small" margin-left="10rpx">选手</u-tag>
          </view>
        </view>

        <!-- 右侧天气及状态 -->
        <view class="right-status">
          <!-- 天气图标 + 文本 -->
          <view class="weather-box">
            <u-icon :name="item.weatherIcon" size="24" color="#999" />
            <text class="weather-text">{{ item.weatherText }}</text>
          </view>
          <!-- 状态按钮，如已结束 -->
          <u-tag color="#eeeeee" textColor="#666" size="small" shape="circle" class="status-tag">
            {{ item.status }}
          </u-tag>
        </view>
      </view>
    </view>

    <!-- 加载更多 / 没有更多 -->
    <view class="loadmore-area">
      <u-loadmore :status="loadStatus" loadmoreText="正在加载..." loadendText="没有更多了..." font-size="14"></u-loadmore>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 球局列表数据
      listData: [],
      // 加载状态：more / loading / noMore
      loadStatus: 'more',
      // 模拟分页
      pageNum: 1,
      pageSize: 3,
      totalPage: 3, // 假设总共3页
    }
  },
  onLoad() {
    this.getListData()
  },
  // onReachBottom: 监听用户上拉触底事件
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    // 初次获取数据
    getListData() {
      const data = this.mockData()
      this.listData = data.slice(0, this.pageSize)
      if (this.pageNum >= this.totalPage) {
        this.loadStatus = 'noMore'
      }
    },
    // 上拉加载更多
    loadMore() {
      if (this.loadStatus === 'noMore' || this.loadStatus === 'loading') return
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        const data = this.mockData()
        const start = 0
        const end = this.pageNum * this.pageSize
        this.listData = data.slice(start, end)
        if (this.pageNum >= this.totalPage) {
          this.loadStatus = 'noMore'
        } else {
          this.loadStatus = 'more'
        }
      }, 1000)
    },
    mockData() {
      return [
        {
          title: 'BoBo的球局',
          location: '上海美兰湖-尼克劳斯球场',
          time: '2024-12-25 09:55:29',
          watchers: 4,
          weatherIcon: 'sun',     // u-icon 的内置图标名，可根据uView文档替换，如'cloudy','sun','rain'
          weatherText: '晴 6°C',
          status: '已结束',
          members: [
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
          ],
        },
        {
          title: 'KinChung Tang的球局',
          location: '上海林克司高尔夫乡村俱乐部',
          time: '2024-12-19 06:40:05',
          watchers: 2,
          weatherIcon: 'cloudy',
          weatherText: '晴 6°C',
          status: '已结束',
          members: [
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
          ],
        },
        {
          title: 'George的球局',
          location: '苏州太仓新东海高尔夫俱乐部',
          time: '2024-12-19 12:20:00',
          watchers: 3,
          weatherIcon: 'snow',
          weatherText: '阴 3°C',
          status: '已结束',
          members: [
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
            { avatar: 'https://static.shuoshijiankang.com/images/theme_green/doctorHead.png' },
          ],
        },
      ]
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

/* 卡片 */
.card-box {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
}

/* 卡片内部布局：左侧 + 右侧 */
.card-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* 左侧信息 */
.left-info {
  display: flex;
  flex-direction: column;
}

.game-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.game-location {
  font-size: 13px;
  color: #888;
  margin-bottom: 10rpx;
}

.time-watchers {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.time-text,
.watch-text {
  font-size: 12px;
  color: #999;
}

/* 底部头像 + 标签 */
.participants {
  display: flex;
  align-items: center;
  height: 40px;

  image {
    width: 20px;
    height: 20px;
  }
}

.u-avatar-item {
  display: flex;
  width: 40px;
  height: 40px;
}

/* 右侧状态 */
.right-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  /* 上下分布天气和已结束标签 */
}

.weather-box {
  display: flex;
  align-items: center;
}

.weather-text {
  font-size: 13px;
  color: #666;
  margin-left: 5rpx;
}

.status-tag {
  margin-top: 10rpx;
}

/* 加载更多区域 */
.loadmore-area {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
}
</style>